<template>
  <div class="grouping-page">
    <div class="connection-status">
      <span :class="{ 'connected': isConnected, 'disconnected': !isConnected }">
        {{ isConnected ? '● 已连接' : '○ 未连接' }}
      </span>
      <span class="online-users">在线人数: {{ connectedUsers }}</span>
      <span class="last-update">最后更新: {{ lastUpdateTime }}</span>
    </div>

    <div class="main-content">
      <div class="players-pool">
        <h2>选手池 ({{ availablePlayers.length }})</h2>
        <div class="filter-section">
          <el-input
            v-model="playerFilter"
            placeholder="筛选选手昵称"
            clearable
            size="small"
            style="width: 100%"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="players-grid" @dragover.prevent @drop="handlePoolDrop($event)">
          <template v-for="player in filteredPlayers" :key="player.id">
            <SuperGoldenCard
              v-if="isSuperGoldenPlayer(player.id)"
              :is-player-card="true"
              :draggable="true"
              @dragstart="handleDragStart(player, $event, 'pool')"
            >
              <div class="player-ability">
                <span v-for="i in player.ability" :key="i" class="star">★</span>
              </div>
              <div class="player-name">{{ player.nickname }}</div>
              <div class="player-stats">
                <span class="rank">{{ getRankLabel(player.rank) }}</span>
                <span class="mmr">{{ player.highestMmr }}</span>
              </div>
              <div class="player-positions">
                {{ player.positions.map(pos => getPositionLabel(pos)).join(', ') }}
              </div>
              <div class="player-tags" v-if="player.tags && player.tags.length > 0">
                {{ player.tags.join(', ') }}
              </div>
              <div class="player-tags" v-else>
                <span style="color: #909399; font-style: italic;">这个老登很神秘</span>
              </div>
            </SuperGoldenCard>
            
            <div
              v-else
              :class="['player-card', { 'golden-player': isGoldenPlayer(player.id) }]"
              draggable="true"
              @dragstart="handleDragStart(player, $event, 'pool')"
            >
              <div class="player-ability">
                <span v-for="i in player.ability" :key="i" class="star">★</span>
              </div>
              <div class="player-name">{{ player.nickname }}</div>
              <div class="player-stats">
                <span class="rank">{{ getRankLabel(player.rank) }}</span>
                <span class="mmr">{{ player.highestMmr }}</span>
              </div>
              <div class="player-positions">
                {{ player.positions.map(pos => getPositionLabel(pos)).join(', ') }}
              </div>
              <div class="player-tags" v-if="player.tags && player.tags.length > 0">
                {{ player.tags.join(', ') }}
              </div>
              <div class="player-tags" v-else>
                <span style="color: #909399; font-style: italic;">这个老登很神秘</span>
              </div>
            </div>
          </template>
        </div>
      </div>

      <div class="groups-section">
        <h2>比赛分组 (8个队伍)</h2>
        <div class="groups-grid">
          <div
            v-for="(group, groupIndex) in groups"
            :key="groupIndex"
            class="group-container"
            @dragover="handleDragOver($event, groupIndex)"
            @drop="handleDrop($event, groupIndex)"
          >
            <div class="group-header">
              <div class="group-title-section">
                <div class="group-title-row">
                  <h3>队伍 {{ groupIndex + 1 }}</h3>
                  <span class="total-mmr">总分: {{ getGroupTotalMmr(group.players) }}</span>
                  <span class="player-count">{{ group.players.length }}/8</span>
                </div>
              </div>
            </div>
            <div class="players-grid">
              <template v-for="player in group.players" :key="player.id">
                <SuperGoldenCard
                  v-if="isSuperGoldenPlayer(player.id)"
                  :is-player-card="true"
                  :draggable="true"
                  @dragstart="handleDragStart(player, $event, groupIndex)"
                >
                  <div class="player-ability">
                    <span v-for="i in player.ability" :key="i" class="star">★</span>
                  </div>
                  <div class="player-name">{{ player.nickname }}</div>
                  <div class="player-stats">
                    <span class="rank">{{ getRankLabel(player.rank) }}</span>
                    <span class="mmr">{{ player.highestMmr }}</span>
                  </div>
                  <div class="player-positions">
                    {{ player.positions.map(pos => getPositionLabel(pos)).join(', ') }}
                  </div>
                  <div class="player-tags" v-if="player.tags && player.tags.length > 0">
                    {{ player.tags.join(', ') }}
                  </div>
                  <div class="player-tags" v-else>
                    <span style="color: #909399; font-style: italic;">这个老登很神秘</span>
                  </div>
                </SuperGoldenCard>
                <div
                  v-else
                  :class="['player-card', { 'golden-player': isGoldenPlayer(player.id) }]"
                  draggable="true"
                  @dragstart="handleDragStart(player, $event, groupIndex)"
                >
                  <div class="player-ability">
                    <span v-for="i in player.ability" :key="i" class="star">★</span>
                  </div>
                  <div class="player-name">{{ player.nickname }}</div>
                  <div class="player-stats">
                    <span class="rank">{{ getRankLabel(player.rank) }}</span>
                    <span class="mmr">{{ player.highestMmr }}</span>
                  </div>
                  <div class="player-positions">
                    {{ player.positions.map(pos => getPositionLabel(pos)).join(', ') }}
                  </div>
                  <div class="player-tags" v-if="player.tags && player.tags.length > 0">
                    {{ player.tags.join(', ') }}
                  </div>
                  <div class="player-tags" v-else>
                    <span style="color: #909399; font-style: italic;">这个老登很神秘</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import type { Player } from '@dx-fun-group/shared-types'
import { getRankLabel, getPositionLabel, isSuperGoldenPlayer, isGoldenPlayer } from '../../utils/playerUtils'
import { io, Socket } from 'socket.io-client'
import SuperGoldenCard from '../../components/common/SuperGoldenCard.vue'

const isConnected = ref(false)
const lastUpdateTime = ref('--')
const connectedUsers = ref(0)
const allPlayers = ref<Player[]>([]) // 所有选手的完整列表
const availablePlayers = ref<Player[]>([])
const groups = ref(Array.from({ length: 8 }, () => ({ players: [] as Player[] })))
const playerFilter = ref('')

// 音频播放相关
const cowAudio = ref<HTMLAudioElement | null>(null)
const lastCowPlayTime = ref<number>(0)



// 筛选后的选手列表
const filteredPlayers = computed(() => {
  if (!playerFilter.value) {
    return availablePlayers.value
  }
  return availablePlayers.value.filter(player => 
    player.nickname.toLowerCase().includes(playerFilter.value.toLowerCase())
  )
})

// WebSocket连接
let socket: Socket | null = null

const loadPlayers = async () => {
  try {
    // 使用正确的API地址，获取所有选手（不分页）
    const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api' : 'http://47.109.186.175:8123/api'
    const response = await fetch(`${baseURL}/players/all`)
    const data = await response.json()
    if (data.success) {
      allPlayers.value = data.data || []
      // 加载选手后更新选手池
      updateAvailablePlayers()
    } else {
      ElMessage.error('加载选手数据失败')
    }
  } catch (error) {
    console.error('加载选手数据失败:', error)
    ElMessage.error('加载选手数据失败')
  }
}

// 计算队伍总分数
const getGroupTotalMmr = (players: Player[]): number => {
  return players.reduce((total, player) => total + player.highestMmr, 0)
}

// 更新选手池，移除已在分组中的选手
const updateAvailablePlayers = () => {
  // 获取所有已在分组中的选手ID
  const groupedPlayerIds = new Set<string>()
  groups.value.forEach(group => {
    group.players.forEach(player => {
      groupedPlayerIds.add(player.id)
    })
  })
  
  // 从所有选手中过滤出不在分组中的选手
  availablePlayers.value = allPlayers.value.filter(player => 
    !groupedPlayerIds.has(player.id)
  )
}

const handleDragStart = (player: Player, event: DragEvent, from: number | 'pool') => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('playerId', player.id)
    event.dataTransfer.setData('from', String(from))
  }
}

const handleDragOver = (event: DragEvent, _groupIndex: number) => {
  event.preventDefault()
}

const handleDrop = (event: DragEvent, toGroupIndex: number) => {
  event.preventDefault()
  const playerId = event.dataTransfer?.getData('playerId')
  const from = event.dataTransfer?.getData('from')
  if (!playerId || from === undefined) return

  if (from === 'pool') {
    // 选手池 → 队伍
    const player = availablePlayers.value.find(p => p.id === playerId)
    if (!player) return
    if (groups.value[toGroupIndex].players.length >= 8) {
      ElMessage.warning('队伍人数已达上限')
      return
    }
    // 本地状态
    availablePlayers.value = availablePlayers.value.filter(p => p.id !== playerId)
    groups.value[toGroupIndex].players.push(player)
    // WebSocket同步
    sendWebSocketMessage('player_moved', {
      player,
      fromGroup: null,
      toGroup: toGroupIndex
    })
  } else {
    // 队伍 → 队伍
    const fromGroupIndex = Number(from)
    if (isNaN(fromGroupIndex)) return
    if (fromGroupIndex === toGroupIndex) return
    const player = groups.value[fromGroupIndex].players.find(p => p.id === playerId)
    if (!player) return
    if (groups.value[toGroupIndex].players.length >= 8) {
      ElMessage.warning('队伍人数已达上限')
      return
    }
    // 本地状态
    groups.value[fromGroupIndex].players = groups.value[fromGroupIndex].players.filter(p => p.id !== playerId)
    groups.value[toGroupIndex].players.push(player)
    // WebSocket同步
    sendWebSocketMessage('player_moved', {
      player,
      fromGroup: fromGroupIndex,
      toGroup: toGroupIndex
    })
  }
  updateAvailablePlayers()
}

const handlePoolDrop = (event: DragEvent) => {
  event.preventDefault()
  const playerId = event.dataTransfer?.getData('playerId')
  const from = event.dataTransfer?.getData('from')
  if (!playerId || from === undefined) return
  if (from === 'pool') return // 选手池自己拖自己无效
  const fromGroupIndex = Number(from)
  if (isNaN(fromGroupIndex)) return
  const player = groups.value[fromGroupIndex].players.find(p => p.id === playerId)
  if (!player) return
  // 本地状态
  groups.value[fromGroupIndex].players = groups.value[fromGroupIndex].players.filter(p => p.id !== playerId)
  availablePlayers.value.push(player)
  // WebSocket同步
  sendWebSocketMessage('player_moved', {
    player,
    fromGroup: fromGroupIndex,
    toGroup: null
  })
  updateAvailablePlayers()
}

const resetGroups = async () => {
  try {
    await ElMessageBox.confirm('确定要重置所有分组吗？', '确认重置', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 发送WebSocket消息
    sendWebSocketMessage('groups_reset', {})
    
    ElMessage.success('分组已重置')
  } catch (error) {
    // 用户取消
  }
}

// 导出函数供模板使用
defineExpose({
  resetGroups
})

// WebSocket连接
const connectWebSocket = () => {
  // 使用正确的WebSocket地址
  const wsUrl = import.meta.env.DEV ? 'http://localhost:3000' : 'http://47.109.186.175:3000'
  
  console.log('🔌 连接WebSocket:', wsUrl)
  
  socket = io(wsUrl, {
    transports: ['websocket', 'polling'],
    path: '/socket.io/',
    timeout: 20000,
    forceNew: true
  })
  
  socket.on('connect', () => {
    console.log('✅ WebSocket连接成功')
    isConnected.value = true
    ElMessage.success('实时连接已建立')
  })
  
  socket.on('disconnect', () => {
    console.log('❌ WebSocket连接断开')
    isConnected.value = false
    ElMessage.warning('连接已断开')
  })
  
  socket.on('connect_error', (error) => {
    console.log('❌ WebSocket连接错误:', error)
    isConnected.value = false
    ElMessage.error('连接失败: ' + error.message)
  })
  
  socket.on('grouping_state', (state: any) => {
    groups.value = state.groups
    lastUpdateTime.value = new Date(state.lastUpdate).toLocaleTimeString()
    connectedUsers.value = state.connectedUsers || 0
    // 重新计算选手池，移除已在分组中的选手
    updateAvailablePlayers()
  })
  
  socket.on('grouping_update', (state: any) => {
    // 检查新状态中是否有188061713在分组中
    const newHas188061713 = state.groups.some((group: any) => 
      group.players.some((player: any) => player.id === '188061713')
    )
    
    // 检查当前状态中是否有188061713在分组中
    const currentHas188061713 = groups.value.some((group: any) => 
      group.players.some((player: any) => player.id === '188061713')
    )
    
    // 如果新状态有但当前状态没有，说明刚被添加，播放音频
    const now = Date.now()
    if (newHas188061713 && !currentHas188061713 && (now - lastCowPlayTime.value > 2000)) {
      console.log('🐮 检测到188061713选手刚被添加到分组，播放牛叫声')
      lastCowPlayTime.value = now
      if (cowAudio.value) {
        try {
          cowAudio.value.currentTime = 0
          cowAudio.value.play().catch(error => {
            console.warn('音频播放失败:', error)
          })
        } catch (error) {
          console.warn('音频播放出错:', error)
        }
      }
    }
    
    groups.value = state.groups
    lastUpdateTime.value = new Date(state.lastUpdate).toLocaleTimeString()
    connectedUsers.value = state.connectedUsers || 0
    // 重新计算选手池，移除已在分组中的选手
    updateAvailablePlayers()
  })
}

// 发送WebSocket消息
const sendWebSocketMessage = (type: string, data: any) => {
  if (socket && socket.connected) {
    socket.emit(type, data)
  }
}

onMounted(() => {
  loadPlayers()
  connectWebSocket()
  
  // 初始化音频
  cowAudio.value = new Audio('/cow.mp3')
  cowAudio.value.preload = 'auto'
})

onUnmounted(() => {
  if (socket) {
    socket.disconnect()
  }
  
  // 清理音频资源
  if (cowAudio.value) {
    cowAudio.value.pause()
    cowAudio.value.src = ''
    cowAudio.value = null
  }
})
</script>

<style scoped>
.grouping-page {
  height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 100%);
  color: white;
  padding: 10px;
  overflow: hidden;
}

.connection-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}

.connected {
  color: #4caf50;
}

.disconnected {
  color: #f44336;
}

.online-users {
  color: #2196f3;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}

.last-update {
  opacity: 0.8;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 15px;
  height: calc(100vh - 40px);
}

.players-pool, .groups-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);
  overflow: hidden;
}

.players-pool h2, .groups-section h2 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #667eea;
}

.filter-section {
  margin-bottom: 12px;
}

.filter-section .el-input {
  --el-input-bg-color: rgba(255, 255, 255, 0.1);
  --el-input-border-color: rgba(102, 126, 234, 0.3);
  --el-input-hover-border-color: rgba(102, 126, 234, 0.5);
  --el-input-focus-border-color: rgba(102, 126, 234, 0.8);
  --el-input-text-color: #ffffff;
  --el-input-placeholder-color: rgba(255, 255, 255, 0.6);
}

.filter-section .el-input__wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filter-section .el-input__wrapper:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.filter-section .el-input__wrapper.is-focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.8), 0 4px 16px rgba(102, 126, 234, 0.3);
}

.filter-section .el-input__inner {
  color: #ffffff;
  font-size: 14px;
}

.filter-section .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.filter-section .el-input__prefix {
  color: rgba(102, 126, 234, 0.8);
}

.players-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  align-content: flex-start;
  min-height: 260px;
}

/* 保证所有卡片宽度一致，不受父容器影响 */
.players-grid .super-golden-card.is-player-card,
.players-grid .player-card {
  width: 160px;
  min-width: 140px;
  max-width: 200px;
  height: 240px;
}

.player-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: all 0.3s ease;
  border: 2px solid;
  border-image: linear-gradient(45deg, #667eea, #764ba2, #667eea) 1;
  position: relative;
  overflow: hidden;
  width: calc((100% - 24px) / 3);
  min-width: 140px;
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.player-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(102, 126, 234, 0.1) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}



.player-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}

.player-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
  transform: translateY(-2px) scale(1.01);
  border-image: linear-gradient(45deg, #667eea, #764ba2, #667eea, #667eea) 1;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4), 0 0 15px rgba(102, 126, 234, 0.2);
  z-index: 10;
}

.player-card:hover::after {
  opacity: 1;
}



.player-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 12px rgba(102, 126, 234, 0.8);
}

/* 金色选手卡片样式 */
.player-card.golden-player {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 193, 7, 0.15) 100%);
  border: 2px solid;
  border-image: linear-gradient(45deg, #ffd700, #ffb300, #ffd700) 1;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2);
}

.player-card.golden-player::before {
  background: linear-gradient(90deg, #ffd700, #ffb300, #ffd700);
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

.player-card.golden-player:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 193, 7, 0.25) 100%);
  transform: translateY(-2px) scale(1.01);
  border-image: linear-gradient(45deg, #ffd700, #ffb300, #ffd700, #ffd700) 1;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.3);
}

.player-card.golden-player::after {
  background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.2) 50%, transparent 70%);
}

.player-card.golden-player .player-name {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

.player-card.golden-player .player-ability .star {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}



@keyframes superGoldenSparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(180deg);
  }
}

.player-card .player-ability {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.player-ability .star {
  color: #ff9800;
  font-size: 16px;
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.8);
}

.player-card .player-name {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 6px;
  text-align: center;
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
}

.player-card .player-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.player-stats .rank {
  font-size: 11px;
  color: #ffd700;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.player-stats .mmr {
  font-size: 11px;
  color: #4caf50;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.player-stats .ability {
  font-size: 11px;
  color: #ff9800;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.05));
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 152, 0, 0.2);
}

.player-card .player-positions {
  font-size: 11px;
  color: #2196f3;
  font-weight: 600;
  text-align: center;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.08));
  border-radius: 4px;
  border: 1px solid rgba(33, 150, 243, 0.3);
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
  height: 20px;
  margin-bottom: 4px;
}

.player-card .player-tags {
  font-size: 16px;
  color: #ff6b9d;
  text-align: center;
  line-height: 1.3;
  overflow: visible;
  word-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(255, 107, 157, 0.15));
  border-radius: 6px;
  border: 1px solid rgba(255, 107, 157, 0.4);
  text-shadow: 0 0 8px rgba(255, 107, 157, 0.8);
  min-height: 24px;
  flex: 1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.groups-grid {
  display: flex;
  flex-direction: column; /* 每个队伍一行 */
  gap: 12px;
  padding-right: 3px;
  width: 100%;
  overflow-y: auto;
  max-height: 100vh;
}

.group-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  gap: 8px;
}

.group-header {
  width: 80px;
  min-width: 0;
  max-width: 120px;
  margin-bottom: 0;
  margin-right: 12px;
  padding: 16px 6px 16px 10px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  background: linear-gradient(135deg, #23243a 60%, #2a2d3a 100%);
  border-left: 4px solid #444a;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 0 8px 0 #000a;
  position: relative;
}

/* 移除电竞icon */
.group-header::before {
  display: none;
}

.group-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.group-header h3 {
  font-size: 15px;
  margin-bottom: 0;
  font-weight: 900;
  color: #e0e0e0;
  letter-spacing: 1px;
  text-shadow: 0 0 4px #222, 0 0 2px #fff1;
  font-family: 'Orbitron', 'Consolas', 'Arial Black', sans-serif;
  text-transform: uppercase;
}

.group-header .total-mmr {
  color: #fff;
  font-weight: 700;
  background: #363a4a;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 0;
  box-shadow: 0 0 4px #222a;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.group-header .player-count {
  color: #fff;
  font-weight: 700;
  background: #363a4a;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 0;
  box-shadow: 0 0 4px #222a;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.player-count {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 删除 group-players 相关样式 */

.group-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.group-player:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 分组中金色选手卡片样式 */
.group-player.golden-player {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 193, 7, 0.15) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.group-player.golden-player:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 193, 7, 0.25) 100%);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.group-player.golden-player .player-name {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.group-player.golden-player .group-star {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.player-info {
  flex: 1;
}

.group-player-ability {
  display: flex;
  gap: 1px;
  margin-bottom: 2px;
  justify-content: center;
}

.group-star {
  color: #ff9800;
  font-size: 10px;
  text-shadow: 0 0 4px rgba(255, 152, 0, 0.8);
}

.player-info .player-name {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 1px;
  color: #ffffff;
}

.player-details {
  display: flex;
  gap: 6px;
  font-size: 11px;
  flex-wrap: nowrap;
}

.player-details .rank {
  color: #ffd700;
  font-weight: 500;
}

.player-details .mmr {
  color: #4caf50;
  font-weight: 500;
}

.player-details .ability {
  color: #ff9800;
  font-weight: 500;
}

.player-info .player-positions {
  font-size: 11px;
  color: #b0bec5;
  margin-top: 1px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.player-info .player-tags {
  font-size: 11px;
  color: #ff6b9d;
  margin-top: 3px;
  line-height: 1.3;
  overflow: visible;
  word-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 107, 157, 0.1));
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 107, 157, 0.3);
  box-shadow: 0 1px 4px rgba(255, 107, 157, 0.2);
}

.remove-btn {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 82, 82, 0.1));
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.remove-btn:hover {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.4), rgba(255, 82, 82, 0.2));
  color: #ff5252;
  transform: scale(1.1);
}

/* 滚动条样式 */
.players-grid::-webkit-scrollbar,
.groups-grid::-webkit-scrollbar {
  width: 6px;
}

.players-grid::-webkit-scrollbar-track,
.groups-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.players-grid::-webkit-scrollbar-thumb,
.groups-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.players-grid::-webkit-scrollbar-thumb:hover,
.groups-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .groups-grid {
    grid-template-columns: 1fr;
  }
  
  .connection-status {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
</style>
